<template>
  <div class='wrap'>
    <div class="lottery-main">
      <img v-if="prizeId === 1" style="width:100%" src="../assets/lottery/bg_27.png">
      <img v-else style="width:100%" src="../assets/lottery/bg_41.png">
      <div class="container">
        <div class="lucky-title"><p style="margin-top:-0.5rem;">你有{{lottery_ticket}}次抽奖机会哦</p></div>
        <div class="wheel-main">
            <div class="wheel-pointer-box">
                  <div class="wheel-pointer" @click="rotate_handle()" :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></div>
            </div>
            <div class="wheel-bg" :class="lotteryBg" :style="{transform:rotate_angle,transition:rotate_transition}">
                <div class="prize-list">
                    <div class="prize-item" v-for="(item,index) in prize_list" :key="index"></div>
                </div>
            </div>
        </div>
        <div class="lottery-rule">
          <div style="display:flex;text-align: center;justify-content: center;">
            <div class="rule-title">
              <p style="margin-top:-0.8rem;color:yellow;font-size:0.8rem;">活动规则</p>
            </div>
          </div>
          <div class="rule-content" v-html="ruleContent">
          </div>
        </div>
      </div>
      <my-toast v-show="toast_control" toastMsg='很遗憾没有中奖' toastType='alert' toastAction='/mode'></my-toast>
      <my-toast v-show="!isCanPrize" toastMsg='很遗憾,两次抽奖需间隔7天以上' toastType='alert' toastAction='/mode'></my-toast>
      <my-toast v-show="hasPrize" toastMsg="hasPrizeMsg" toastType='alert' toastAction='/mode'></my-toast>
      <my-toast v-show="wait" toastMsg='请稍候' toastType='wait'></my-toast>
    </div>
  </div>
</template>
<script>
import Toast from '../components/Toast'
export default {
  data () {
    return {
      lotteryBg: 'litter-lottery-bg',
      easejoy_bean: 0, // 金豆
      lottery_ticket: 1, // 抽奖次数
      ruleContent: '',
      prizeId: 1,
      openId: null,
      isCanPrize: true,
      prize_list: [],
      litter_prize_list: [
        {
          name: '20元话费', // 奖品名称
          isPrize: 1 // 该奖项是否为奖品
        },
        {
          name: '10元话费',
          isPrize: 1
        },
        {
          name: '5元话费',
          isPrize: 1
        },
        {
          name: '谢谢参与',
          isPrize: 0
        },
        {
          name: '20元话费',
          isPrize: 1
        },
        {
          name: '10元话费',
          isPrize: 1
        },
        {
          name: '5元话费',
          isPrize: 1
        },
        {
          name: '谢谢参与',
          isPrize: 0
        }
      ], // 小奖品列表
      big_prize_list: [
        {
          name: '100元话费', // 奖品名称
          isPrize: 1 // 该奖项是否为奖品
        },
        {
          name: '10元话费',
          isPrize: 1
        },
        {
          name: '50元话费',
          isPrize: 1
        },
        {
          name: '10元话费',
          isPrize: 1
        },
        {
          name: '20元话费',
          isPrize: 1
        },
        {
          name: '10元话费',
          isPrize: 1
        },
        {
          name: '谢谢参与',
          isPrize: 0
        },
        {
          name: '20元话费',
          isPrize: 1
        }
      ], // 大奖品列表
      toast_control: false, // 抽奖结果弹出框控制器
      hasPrize: false, // 是否中奖
      hasPrizeMsg: '',
      prize_index: null, // 抽中序号
      start_rotating_degree: 0, // 初始旋转角度
      rotate_angle: 0, // 将要旋转的角度
      start_rotating_degree_pointer: 0, // 指针初始旋转角度
      rotate_angle_pointer: 0, // 指针将要旋转的度数
      rotate_transition: 'transform 6s ease-in-out', // 初始化选中的过度属性控制
      rotate_transition_pointer: 'transform 12s ease-in-out', // 初始化指针过度属性控制
      click_flag: true, // 是否可以旋转抽奖
      wait: false,
      recordId: '' // 中奖纪录id
    }
  },
  components: {
    myToast: Toast
  },
  beforeCreate () {
    this.GLOBAL.validate()
  },
  created () {
    this.prizeId = Number(this.$route.params.prizeId)
    this.init_prize_list()
    this.loadRule()
    if (this.prizeId === 1) {
      this.lotteryBg = 'litter-lottery-bg'
    } else {
      this.lotteryBg = 'big-lottery-bg'
    }
  },
  mounted () {
    this.openId = this.GLOBAL.player.openId
    this.canPrize()
    // 添加返回事件监听
    let that = this
    history.pushState(null, null, '')
    window.onpopstate = function (event) {
      that.$router.push({path: '/'})
    }
  },
  computed: {
  },
  methods: {
    // 此方法为处理奖品数据
    init_prize_list () {
      if (this.prizeId === 1) {
        this.prize_list = this.litter_prize_list
      } else {
        this.prize_list = this.big_prize_list
      }
    },
    rotate_handle () {
      // this.prize()
      if (this.click_flag) {
        this.wait = true
        this.lottery_ticket = 0
        this.prize()
      }
    },
    loadRule () {
      this.$http.getLRule().then(
        (result) => {
          this.ruleContent = result.data.replace(new RegExp('\\n', 'gm'), '<br/>')
        }
      ).catch((error) => {
        console.error(error)
      })
    },
    prize () {
      this.$http.prize(this.openId, this.prizeId).then(
        (result) => {
          this.GLOBAL.player.isCanPrize = false
          this.wait = false
          let prizeIndex = 0
          if (result.data === '') {
            if (this.prizeId === 1) {
              prizeIndex = 3
            } else {
              prizeIndex = 6
            }
            this.rotating(prizeIndex)
          } else {
            this.GLOBAL.player.optionId = result.data.prizeOptionId
            prizeIndex = Number(result.data.value)
            if (prizeIndex > 8) {
              if (this.prizeId === 1) {
                prizeIndex = 3
              } else {
                prizeIndex = 6
              }
            }
            this.recordId = result.data.id
          }
          this.rotating(prizeIndex)
        }
      ).catch((error) => {
        console.error(error)
      })
    },
    canPrize () {
      this.$http.isCanPrize(this.GLOBAL.player.openId).then(
        (result) => {
          this.GLOBAL.player.isCanPrize = result.data
          this.isCanPrize = result.data
        }
      ).catch((error) => {
        console.error(error)
      })
    },
    rotating (index) {
      let duringTime = 5 // 默认为1s
      // let random = Math.floor(Math.random() * 7)
      this.prize_index = index // || random // 最终要旋转到哪一块，对应prize_list的下标
      let resultAngle = [337.5, 292.5, 247.5, 202.5, 157.5, 112.5, 67.5, 22.5] // 最终会旋转到下标的位置所需要的度数
      let randCircle = 6 // 附加多转几圈，2-3
      this.click_flag = false // 旋转结束前，不允许再次触发
      // 转动盘子
      let rotateAngle =
        this.start_rotating_degree +
        randCircle * 360 +
        resultAngle[this.prize_index] -
        this.start_rotating_degree % 360
      this.start_rotating_degree = rotateAngle
      this.rotate_angle = 'rotate(' + rotateAngle + 'deg)'
      // // //转动指针
      // this.rotate_angle_pointer = "rotate("+this.start_rotating_degree_pointer + 360*rand_circle+"deg)";
      // this.start_rotating_degree_pointer =360*rand_circle;
      let that = this
      // 旋转结束后，允许再次触发
      setTimeout(function () {
        // that.click_flag = true
        that.game_over()
      }, duringTime * 1000 + 1500) // 延时，保证转盘转完
    },
    game_over () {
      this.hasPrize = this.prize_list[this.prize_index].isPrize
      if (this.hasPrize) {
        // 中奖
        this.GLOBAL.player.prizeCode = this.prize_index
        // this.hasPrizeMsg = '恭喜你，中奖了，奖品为' + this.prize_list[this.prize_index].name
        this.$router.push('/prize/' + this.prizeId + '/' + this.recordId)
      } else {
        this.toast_control = true
      }
    },
    // 关闭弹窗
    close_toast () {
      this.toast_control = false
      this.$router.push('/mode')
    }
  }
}
</script>
<style scoped>
.wrap {
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.lottery-main {
  width:100%;
  position: relative;
  text-align: center;
}
.container {
  width: 100%;
  top:30%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.lucky-title {
  width: 70%;
  margin-left: 15%;
  line-height: 1.5rem;
  background: url("../assets/lottery/bg_23.png") no-repeat center top;
  background-size: 100%;
  color: white;
  font-size: 0.9rem;
}
.wheel-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: auto;
}
.wheel-bg {
  width: 18.4375rem;
  height: 18.4375rem;
  color: #fff;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  transition: transform 3s ease;
}
.big-lottery-bg {
  background: url("../assets/lottery/gif_1.png") no-repeat center top;
  background-size: 100%;
}
.litter-lottery-bg {
  background: url("../assets/lottery/gif.png") no-repeat center top;
  background-size: 100%;
}
.wheel-pointer-box {
  position: absolute;
  top: 30%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -60%);
  width: 5rem;
  height: 7rem;
}
.wheel-pointer {
  width: 5rem;
  height: 7rem;
  z-index: 101;
  background: url("../assets/lottery/btn_19.png") no-repeat center top;
  background-size: 100%;
  transform-origin: center 60%;
}
.wheel-bg div {
  text-align: center;
}
.prize-list {
  width: 100%;
  height: 100%;
  position: relative;
}
.prize-list .prize-item {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.prize-list .prize-item:first-child {
  top: 0;
  left: 8.3125rem;
  transform: rotate(20deg);
}
.prize-item {
  width: 5.875rem;
  height: 9rem;
}
.prize-type {
  font-size: 0.75rem;
}
.lottery-rule {
  margin-top: 2rem;
  width: 100%;
}
.lottery-rule .rule-title {
  height: 4rem;
  width: 15rem;
  line-height: 4rem;
  background: url("../assets/lottery/bg_24.png") no-repeat center top;
  background-size: 100%;
}
.rule-content {
  color: white;
  height: 10rem;
  width: 80%;
  margin-left: 10%;
  overflow-y:scroll;
  font-size: 0.8rem;
}
</style>
